// 现代化 ECharts 图表配置文件 - 职业院校数字基座大屏

// 现代化通用配置
const commonConfig = {
    backgroundColor: 'transparent',
    textStyle: {
        color: '#E2E8F0',
        fontSize: 12,
        fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif'
    },
    tooltip: {
        backgroundColor: 'rgba(15, 23, 42, 0.95)',
        borderColor: '#3B82F6',
        borderWidth: 1,
        textStyle: {
            color: '#ffffff',
            fontSize: 12
        },
        extraCssText: 'border-radius: 8px; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3); backdrop-filter: blur(10px);'
    },
    legend: {
        textStyle: {
            color: '#E2E8F0',
            fontSize: 11
        }
    },
    animation: true,
    animationDuration: 1000,
    animationEasing: 'cubicOut'
}

// 丰富的色彩主题 - 避免单一蓝色调
const modernColors = {
    // 主色调 - 使用更温暖的色彩
    primary: '#6366F1',      // 靛蓝色
    secondary: '#06B6D4',    // 青色
    accent: '#8B5CF6',       // 紫色
    success: '#10B981',      // 绿色
    warning: '#F59E0B',      // 橙色
    danger: '#EF4444',       // 红色
    info: '#3B82F6',         // 蓝色
    
    // 扩展色彩调色板
    colors: {
        violet: '#7C3AED',
        pink: '#EC4899',
        rose: '#F43F5E',
        teal: '#14B8A6',
        emerald: '#10B981',
        lime: '#84CC16',
        amber: '#F59E0B',
        orange: '#F97316',
        red: '#EF4444',
        slate: '#64748B',
        gray: '#6B7280',
        zinc: '#71717A'
    },
    
    // 渐变色组合
    gradient: {
        // 暖色调渐变
        sunset: ['#F59E0B', '#EF4444'],      // 日落橙红
        ocean: ['#06B6D4', '#3B82F6'],       // 海洋蓝
        forest: ['#10B981', '#059669'],      // 森林绿
        purple: ['#8B5CF6', '#7C3AED'],      // 紫色渐变
        pink: ['#EC4899', '#BE185D'],        // 粉色渐变
        
        // 冷暖对比渐变
        fire: ['#F97316', '#DC2626'],        // 火焰
        ice: ['#06B6D4', '#0891B2'],         // 冰蓝
        aurora: ['#8B5CF6', '#06B6D4'],      // 极光
        spring: ['#84CC16', '#10B981'],      // 春天
        autumn: ['#F59E0B', '#DC2626'],      // 秋天
        
        // 三色渐变
        rainbow: ['#8B5CF6', '#06B6D4', '#10B981'],  // 彩虹
        warm: ['#F59E0B', '#EF4444', '#EC4899'],     // 暖色
        cool: ['#06B6D4', '#3B82F6', '#8B5CF6']      // 冷色
    },
    
    // 数据可视化专用色彩
    dataViz: [
        '#6366F1',  // 靛蓝
        '#10B981',  // 绿色
        '#F59E0B',  // 橙色
        '#EF4444',  // 红色
        '#8B5CF6',  // 紫色
        '#06B6D4',  // 青色
        '#EC4899',  // 粉色
        '#84CC16',  // 青柠
        '#F97316',  // 橙红
        '#14B8A6'   // 蓝绿
    ]
}

// 现代化学生状态分布饼图配置
export const getModernStudentStatusPieOption = (data: any[]) => {
    // 使用数据可视化专用色彩，确保色彩丰富
    const colors = modernColors.dataViz.slice(0, data.length)

    let sorted = [...data].sort((a, b) => b.value - a.value)
    let mainItems = sorted.slice(0, 4).map((item, index) => ({
        ...item,
        itemStyle: {
            color: {
                type: 'radial',
                x: 0.5, y: 0.5, r: 0.8,
                colorStops: [
                    { offset: 0, color: colors[index] || modernColors.dataViz[index % modernColors.dataViz.length] },
                    { offset: 1, color: (colors[index] || modernColors.dataViz[index % modernColors.dataViz.length]) + '60' }
                ]
            },
            borderRadius: 8,
            borderColor: 'rgba(255, 255, 255, 0.15)',
            borderWidth: 2,
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.4)'
        }
    }))

    let otherValue = sorted.slice(4).reduce((sum, item) => sum + item.value, 0)
    if (otherValue > 0) {
        mainItems.push({
            name: '其他状态',
            value: otherValue,
            itemStyle: {
                color: modernColors.gradient.orange[0],
                borderRadius: 8,
                borderColor: 'rgba(255, 255, 255, 0.15)',
                borderWidth: 2
            }
        })
    }

    return {
        ...commonConfig,
        legend: {
            orient: 'vertical',
            right: '5%',
            top: 'center',
            itemGap: 12,
            textStyle: {
                color: '#E2E8F0',
                fontSize: 11,
                fontWeight: '500'
            },
            formatter: function (name: string) {
                return name.length > 6 ? name.substring(0, 6) + '...' : name;
            }
        },
        tooltip: {
            ...commonConfig.tooltip,
            trigger: 'item',
            formatter: function (params: any) {
                return `${params.seriesName}<br/>${params.name}: ${params.value.toLocaleString()}人 (${params.percent}%)`;
            }
        },
        series: [{
            name: '学生状态',
            type: 'pie',
            radius: ['45%', '75%'],
            center: ['35%', '50%'],
            data: mainItems,
            minShowLabelAngle: 8,
            label: {
                show: true,
                position: 'outside',
                fontSize: 10,
                color: '#E2E8F0',
                formatter: '{b}\n{c}人',
                distanceToLabelLine: 5,
                fontWeight: '500'
            },
            labelLine: {
                show: true,
                length: 10,
                length2: 8,
                smooth: 0.3,
                lineStyle: {
                    color: 'rgba(226, 232, 240, 0.6)',
                    width: 1
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 30,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(59, 130, 246, 0.8)',
                    borderWidth: 3,
                    borderColor: modernColors.primary
                },
                label: {
                    fontSize: 12,
                    fontWeight: 'bold'
                }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx: number) {
                return idx * 150;
            }
        }]
    }
}

// 现代化专业分布柱状图配置
export const getModernMajorDistributionBarOption = (categories: string[], values: number[]) => ({
    ...commonConfig,
    tooltip: {
        ...commonConfig.tooltip,
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: 'rgba(99, 102, 241, 0.1)'
            }
        },
        formatter: function (params: any) {
            const data = params[0];
            return `${data.name}<br/>学生数: ${data.value.toLocaleString()}人`;
        }
    },
    grid: {
        left: '8%',
        right: '5%',
        bottom: '15%',
        top: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: categories.map(cat => cat.length > 6 ? cat.substring(0, 6) + '...' : cat),
        axisLabel: {
            color: '#94A3B8',
            fontSize: 10,
            rotate: 30,
            margin: 8
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(99, 102, 241, 0.3)',
                width: 1
            }
        },
        axisTick: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            color: '#94A3B8',
            fontSize: 10,
            formatter: function (value: number) {
                return (value / 1000).toFixed(1) + 'k';
            }
        },
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: {
            lineStyle: {
                color: 'rgba(99, 102, 241, 0.1)',
                type: 'dashed'
            }
        }
    },
    series: [{
        type: 'bar',
        data: values.map((value, index) => ({
            value,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [
                        { offset: 0, color: modernColors.dataViz[index % modernColors.dataViz.length] },
                        { offset: 1, color: modernColors.dataViz[index % modernColors.dataViz.length] + '80' }
                    ]
                },
                borderRadius: [6, 6, 0, 0],
                shadowBlur: 12,
                shadowColor: modernColors.dataViz[index % modernColors.dataViz.length] + '40'
            }
        })),
        barWidth: '60%',
        emphasis: {
            itemStyle: {
                shadowBlur: 20,
                shadowColor: 'rgba(99, 102, 241, 0.6)'
            }
        },
        animationDelay: function (idx: number) {
            return idx * 100;
        }
    }]
})

// 现代化趋势线图配置
export const getModernTrendLineOption = (data: any) => ({
    ...commonConfig,
    tooltip: {
        ...commonConfig.tooltip,
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: modernColors.primary
            }
        }
    },
    grid: {
        left: '8%',
        right: '5%',
        bottom: '15%',
        top: '15%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: data.years || data.months,
        axisLabel: {
            color: '#94A3B8',
            fontSize: 11,
            margin: 8
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(59, 130, 246, 0.3)',
                width: 1
            }
        },
        axisTick: { show: false }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            color: '#94A3B8',
            fontSize: 10,
            formatter: function (value: number) {
                return value >= 1000 ? (value / 1000).toFixed(1) + 'k' : value;
            }
        },
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: {
            lineStyle: {
                color: 'rgba(59, 130, 246, 0.1)',
                type: 'dashed'
            }
        }
    },
    series: [{
        name: '趋势数据',
        data: data.data || data.values,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
            color: modernColors.primary,
            width: 3,
            shadowColor: 'rgba(59, 130, 246, 0.3)',
            shadowBlur: 10
        },
        itemStyle: {
            color: modernColors.primary,
            borderColor: '#ffffff',
            borderWidth: 2,
            shadowColor: 'rgba(59, 130, 246, 0.5)',
            shadowBlur: 8
        },
        areaStyle: {
            color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [
                    { offset: 0, color: 'rgba(59, 130, 246, 0.4)' },
                    { offset: 0.5, color: 'rgba(59, 130, 246, 0.2)' },
                    { offset: 1, color: 'rgba(59, 130, 246, 0.05)' }
                ]
            }
        },
        emphasis: {
            itemStyle: {
                shadowBlur: 15,
                shadowColor: 'rgba(59, 130, 246, 0.8)'
            }
        },
        animationDelay: function (idx: number) {
            return idx * 100;
        }
    }]
})

// 现代化雷达图配置
export const getModernRadarOption = (data: any) => ({
    ...commonConfig,
    radar: {
        indicator: data.indicators,
        center: ['50%', '50%'],
        radius: '70%',
        axisName: {
            color: '#E2E8F0',
            fontSize: 11,
            fontWeight: '500'
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(59, 130, 246, 0.2)',
                width: 1
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(59, 130, 246, 0.3)',
                width: 1
            }
        },
        splitArea: {
            areaStyle: {
                color: [
                    'rgba(59, 130, 246, 0.05)',
                    'rgba(59, 130, 246, 0.02)'
                ]
            }
        }
    },
    series: [{
        type: 'radar',
        data: data.data,
        areaStyle: {
            color: 'rgba(59, 130, 246, 0.2)',
            shadowBlur: 20,
            shadowColor: 'rgba(59, 130, 246, 0.3)'
        },
        lineStyle: {
            width: 3,
            color: modernColors.primary,
            shadowBlur: 10,
            shadowColor: 'rgba(59, 130, 246, 0.5)'
        },
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
            color: modernColors.primary,
            borderColor: '#fff',
            borderWidth: 2,
            shadowBlur: 8,
            shadowColor: 'rgba(59, 130, 246, 0.4)'
        },
        emphasis: {
            itemStyle: {
                shadowBlur: 15,
                shadowColor: 'rgba(59, 130, 246, 0.8)'
            }
        }
    }]
})

export default {
    getModernStudentStatusPieOption,
    getModernMajorDistributionBarOption,
    getModernTrendLineOption,
    getModernRadarOption,
    modernColors,
    commonConfig
}